/*
  学习目标：兄弟组件-状态提升
  状态提升: 
   1. 将需要共享的数据, 提升到共同的父组件中
   2. 通过父传子, 子传父间接的共享数据
*/

import React, { Component } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default class App extends Component {
  // 1. 把state提升到父组件中
  state = {
    money: 0,
  };

  // 2. 赚钱方法, 提升到父组件中
  /* 赚钱方法 */
  handleMakeMoney = () => {
    this.setState({ money: this.state.money + 1000 });
  };

  // 7. 父组件定义花钱的函数
  handleCostMoney = () => {
    this.setState({ money: this.state.money - 5000 });
  };

  render() {
    return (
      <div>
        <h1 style={{ textAlign: 'center' }}>家庭存款：</h1>
        <Husband
          // 3. 父传子money
          money={this.state.money}
          // 5. 父传子回调函数
          handleMakeMoney={this.handleMakeMoney}
        ></Husband>
        <hr />
        <Wife
          // 8. 父组件传回调函数给Wife
          handleCostMoney={this.handleCostMoney}
        ></Wife>
      </div>
    );
  }
}
